<template>
    <div class="nav_box">
           <div class="nav" v-for="(item,index) in data.nav_list" :key="index" :style="{
               width:100/(data.column+2)+'%',
               marginTop:data.nav_top+'px',
               marginBottom:data.nav_top+'px',
               }">
               <div class="jb_box" v-if="item.horn>0">
                   <div class="box1">
                        <span :style="(item.horn==3?'padding-top:5px':'')+(item.horn==2?'margin-left: -5px':'')">{{item.horn_title}}</span>
                        <img class="jiaobiao_img"  :src="require('@/image/jiaobiao/menu_sign'+item.horn+'.png')" >
                   </div>
                   
               </div>
               
               <img  :src="item.thumb" :style="{borderRadius:data.nav_radius+'px',width:data.nav_img_size+'px',height:data.nav_img_size+'px',marginBottom:data.nav_img_bottom+'px'}">
               <div v-if="data.is_title" :style="{fontSize:data.title_size+'px',color:item.color}">{{item.title}}</div>
           </div>
    </div>
</template>

<script>
    export default {
        props:['data'],
         name: 'ItemNav',
        data(){
            return{
            }
        }
     
	
    }
</script>

<style >
.nav_box{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    
}
.nav{
    position: relative;
}
.jb_box{
    position: absolute;
    top: -10px;
    right: -5px;
    height: 20px;
    width: 30px;
}
.box1{
    position: relative;
}
.box1 span{
    position: relative;
    z-index: 5;
    color: #fff;
    font-size: 12px;
    display: inline-block;
}
.jiaobiao_img{
    position: absolute;
    width: 28px;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: 4;
}
</style>
